<template>
    <wd-navbar :custom-style="'padding-top:' + navBarTop + 'px;background-color: #ffe8be'" :title="title" left-arrow @click-left="handleClickLeft"></wd-navbar>
    <scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="cs">
            <!-- 渐变色 -->
            <view class="positioning"></view>
            <!-- 轮播图 -->
            <view class="swiper">
                <swiper indicator-active-color="#fff" :autoplay="false" :interval="2000" :duration="500" :circular="true">
                    <swiper-item>
                        <image class="swiper-image" :src="goodList[0]?.image" mode=""></image>
                    </swiper-item>
                </swiper>
            </view>

            <view class="goods">
                <view @click="shopDetas2(it)" class="goods-box" v-for="it in goodList" :key="it.id">
                    <image class="box-img" :src="it.image" mode=""></image>
                    <view class="box-btm">
                        <view class="box-txt">{{ it.title }}{{ it.subtitle }}</view>
                        <view class="box-mony">
                            ￥
                            <text class="mony">{{ it.price }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { utils } from '@/utils/utils.js';
import { category, getClass } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
const pids = ref(); //获取分类内容
const title = ref(''); //标题
const goodList = ref([]); //分类内容列表
const page = ref(1); //当前第几页
const allTotal = ref(''); //列表总页数
const navBarTop = ref(''); //高度
onLoad((options) => {
    // 接收首页过来的分类和标题
    if (options.pid) {
        pids.value = options.pid;
        title.value = options.names;
    }
    getDivide(); // 获取分类内容
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    navBarTop.value = menuButtonInfo.top;
});
//获取分类内容
const getDivide = async () => {
    const ret = await getClass(pids.value, page.value);
    if (ret.code == 1) {
        // 将服务器返回的数据，追加至 goodList
        goodList.value = [...goodList.value, ...ret.data.data];
        allTotal.value = ret.data.total;
        if (ret.data.total == 0) {
            utils('暂无商品');
        }
    } else {
        utils();
    }
};
const scrolltolower = () => {
    console.log('滚动到底部');
    if (goodList.value.length == allTotal.value) {
        return utils('没有更多数据了...');
    }
    page.value++;
    getDivide();
};
//点击商品跳转商品详情
const shopDetas2 = (it) => {
    uni.navigateTo({
        url: `/pages/sub/shopDetails?ids=${it.id}`
    });
};
// 返回上一级
function handleClickLeft() {
    uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.scroll-view {
    .cs {
        // 商品
        .goods {
            .goods-box {
                .box-btm {
                    .box-mony {
                        .mony {
                            font-size: 40rpx;
                        }
                        font-size: 24rpx;
                        color: #f23437;
                    }
                    .box-txt {
                        width: 297rpx;
                        font-size: 28rpx;
                        color: #333333;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2; /* 限制显示的行数 */
                        overflow: hidden; /* 隐藏超出部分 */
                        text-overflow: ellipsis; /* 使用省略号表示超出部分 */
                    }
                    padding: 20rpx 20rpx 34rpx 20rpx;
                }
                .box-img {
                    border-radius: 16rpx 16rpx 0 0;
                    height: 332rpx;
                    width: 100%;
                }
                width: 332rpx;
                border-radius: 16rpx;
                background-color: #fff;
                margin-bottom: 28rpx;
            }
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        // 轮播图
        .swiper {
            .swiper-image {
                width: 690rpx;
                height: 300rpx;
            }
            width: 690rpx;
            height: 300rpx;
            margin: 40rpx 0 35rpx 0;
            overflow: hidden;
            border-radius: 28rpx;
        }
        .positioning {
            height: 282rpx;
            background: linear-gradient(to bottom, #ffe8be, #f7f7f7);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        padding: 50rpx 30rpx 100rpx 30rpx;
        min-height: 100vh;
        background-color: #f7f7f7;
    }
    height: 100vh;
}
</style>
